<template>
  <div class="bg-white-box">
    <dc-row type="flex">
      <dc-col class="text-center mt80" :xs="{ span: 6, offset: 9}">
        <img src="../../static/img/icon-big.png" style="width: 100%;"/>
      </dc-col>
    </dc-row>
    <div class="pl50 pr50 mt80">
      <inputItem placeholder="请输入手机号" type="tel"
                 iconName="icon-login-account"
                 v-model="username"
                 :maxLength = "11"
                 v-validate="{ rules: { required: true,phone: true } }"
                 name="手机号" :class="{'is-danger': errors.has('手机号')}"
      />
      <inputItem class="mt30" placeholder="请输入密码" type="password"
                 iconName="icon-login-password"
                 v-model="password"
                 :maxLength = "20"
                 v-validate="{ rules: { required: true } }"
                 name="密码" :class="{'is-danger': errors.has('密码')}"
      />
    </div>
    <div class="pl50 pr50 mt50">
      <mt-button size="large" type="primary" @click="_login">登录</mt-button>
      <div class="forgets mt30">
        <router-link to="register" class="link">立即注册</router-link>
        <router-link to="forgetPwd" class="link">忘记密码?</router-link>
      </div>
    </div>
    <img src="../../assets/wave.gif" class="wave"/>
  </div>
</template>
<script>
  import inputItem from '@/components/input/inputItem.vue';
  import loginApi from './_login';
  import mintUi from '@/common/mintUi';
  import {col, row} from '@/components/Flex';
  import {mapActions} from 'vuex';

  export default {
    data () {
      return {
        username: '',
        password: ''
      };
    },
    methods: {
      ...mapActions('login', {
          setUserInfo: 'setUserInfo',
          setPermission: 'setPermission'
      }),
      ...mapActions('shopAlter', {
          setStore: 'setStore',
      }),
      // 用户登录
      _login () {
        this.$validator.validateAll().then((result) => {
          let data = {
            username: this.username,
            password: this.password
          };
          if (result) {
            loginApi.login(data, this);
          } else {
            mintUi.openToast(this.errors.items[0].msg);
          }
        });
      }
    },
    components: {
      inputItem,
      'dc-col': col,
      'dc-row': row
    }
  };
</script>
<style lang="scss" scoped>
  @import '../../assets/css/variable';
  .wave{
    width: 100%;
    height: px2rem(250px);
    bottom: px2rem(-30px);
    left:0;
    position: absolute;
  }
  .bg-white-box {
    position: fixed;
    height: 100%;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #fff;
  }
  .forgets {
    > a {
      font-size: px2rem(26px);
      color: #7b78f2;
      + a {
        color: #7e7e7f;
        float: right;
      }
    }
  }
</style>
